<!-- 压力统计的数据列表组件 -->
<template>
  <div id="pressures">
    <table
      id="pressure-list"
      border="1px #e4e4e4"
      cellpadding="10"
      cellspacing="0"
    >
      <tr id="pressure-list-nav">
        <td>序号</td>
        <td>监测点名称</td>
        <td>当前水流量（m³/h）</td>
        <td>上传时间</td>
        <td>应测次数</td>
        <td>实测次数</td>
        <td>合格次数</td>
        <td>合格率（%）</td>
        <td>平均值（m³/h）</td>
        <td>最小值（m³/h）</td>
        <td>最小值时间</td>
        <td>最大值（m³/h）</td>
        <td>最大值时间</td>
      </tr>
      <tr v-for="(item, index) in pressure.dataList">
        <td>{{ index + 1 }}</td>
        <td>{{ item.address }}</td>
        <td>{{ item.miniB }}</td>
        <td>{{ item.uploadTime }}</td>
        <td>{{ item.ResponseTimes }}</td>
        <td>{{ item.actualTimes }}</td>
        <td>{{ item.qualifiedTimes }}</td>
        <td>{{ item.qualifiedProbability }}</td>
        <td>{{ item.averageValueB }}</td>
        <td>{{ item.miniB }}</td>
        <td>{{ item.miniTimeB }}</td>
        <td>{{ item.maxB }}</td>
        <td>{{ item.maxTimeB }}</td>
      </tr>
    </table>
  </div>
</template>

<script setup lang="ts">
import { userPressureData } from "../../../store/pressureData";
let pressure = userPressureData();
let list = [];
// 获取渲染需要的数据
list = pressure.dataList;
</script>

<style scoped>
#pressure-list {
  border: 0px solid #e4e4e4;
  width: 100%;
  font-size: 10px;
  font-weight: 400;
  font-family: "FontAwesome",serif;
  color: #666666;
}
#pressures {
  border: 2px solid #a6dbff;
  margin-top: 8px;
  /* height: 100%; */
}
#pressure-list-nav {
  background-color: #d7effe;
}
#pressure-list-nav td {
  border: 1px solid #8dd1ff;
}
</style>
